<template>
	<view class="order-out-box">
		<!-- 简化的顶部搜索和筛选区域 -->
		<view class="header-search-box">
			<view class="search-input-wrapper">
				<u-icon name="search" size="40" color="#879BBA"></u-icon>
				<input 
					type="text" 
					v-model="search_data.search" 
					placeholder="订单编号/退货单号/商品名称" 
					placeholder-style="color: #879BBA;"
					@confirm="searchConfirm()"
				/>
				<u-icon 
					v-if="search_data.search" 
					name="close" 
					size="32" 
					color="#879BBA"
					@click="search_data.search='';searchConfirm()"
				></u-icon>
			</view>
			<view class="filter-btn" @click="openSearch">
				<u-icon name="list" size="44" color="#FB5904"></u-icon>
			</view>
		</view>
		
		<view class="total-count">
			<text>共{{ total }}条退货单</text>
		</view>
		
		<scroll-view
			scroll-y
			class="order_ul"
			@scrolltolower="scrollTolower"
			@refresherrefresh="refresherrefresh"
			:refresher-enabled="true"
			:refresher-triggered="refresher_triggered"
		>
			<view class="order-card" v-for="(item, index) in order_list" :key="index" @click="goPage(`/pagesT/order/ReturnDetail?id=` + item.id)">
				<!-- 订单头部信息 -->
				<view class="order-header">
					<view class="order-status">
						<view class="status-badge" :class="{'status-stocked': item.inStatus === 5, 'status-not-stocked': item.inStatus !== 5}">
							{{ item.inStatus === 5 ? '已出库' : '待出库' }}
						</view>
						<text class="order-number">{{ item.no }}</text>
					</view>
					<view class="audit-status">
						<u-tag 
							:text="parseInt(item.auditStatus) === 2 ? '已审核' : parseInt(item.auditStatus) === 3 ? '已驳回' : '未审核'" 
							:type="parseInt(item.auditStatus) === 2 ? 'success' : parseInt(item.auditStatus) === 3 ? 'error' : 'warning'"
							size="mini"
						></u-tag>
					</view>
				</view>
				
				<!-- 订单内容 -->
				<view class="order-content">
					<view class="info-item">
						<view class="info-label">客户名称</view>
						<view class="info-value">{{ item.customerName }}</view>
					</view>
					
					<view class="info-item">
						<view class="info-label">退货时间</view>
						<view class="info-value">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
					</view>
					
					<view class="info-item">
						<view class="info-label">退货数量</view>
						<view class="info-value">{{ item.num }} 件</view>
					</view>
					
					<view class="order-amount" :class="[parseInt(item.auditStatus) === 2 ? 'paid' : parseInt(item.auditStatus) === 3 ? 'unpaid' : 'partial-paid']">
						<view class="amount-label">退货金额</view>
						<view class="amount-value">¥ {{ $utils.formattedNumber(item.returnTotalPrice) }}</view>
					</view>
					
					<view class="order-actions">
						<view class="stock-status">
							<u-tag 
								:text="item.inStatus === 5 ? '已出库' : '待出库'" 
								:type="item.inStatus === 5 ? 'primary' : 'info'"
								size="mini"
							></u-tag>
						</view>
						<view class="copy-btn">
							<u-button size="mini" type="primary" @click.stop="copy(item.no)">复制单号</u-button>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="!order_list.length" class="empty-view"><u-empty text="暂无退货单" mode="order"></u-empty></view>
			<u-loadmore v-if="order_list.length" :status="load_status" />
		</scroll-view>
		
		<!-- 筛选弹窗 -->
		<u-popup v-model="search_show" mode="right">
			<view class="search-pop">
				<uniStatusBar></uniStatusBar>
				<view class="popup-header">
					<text class="popup-title">筛选条件</text>
					<u-icon name="close" size="32" color="#333" @click="search_show = false"></u-icon>
				</view>
				
				<view class="form-view">
					<u-form label-width="160rpx" label-position="left">
						<u-form-item label-position="top" label="退货日期">
							<view class="date-range">
								<picker mode="date" @change="bindDateStartChange">
									<view class="date-picker">
										<text>{{ search_data.start ? $u.timeFormat(search_data.start, 'yyyy-mm-dd') : '开始日期' }}</text>
										<u-icon name="calendar" size="28" color="#879BBA"></u-icon>
									</view>
								</picker>
								<text class="date-separator">至</text>
								<picker mode="date" @change="bindDateEndChange">
									<view class="date-picker">
										<text>{{ search_data.end ? $u.timeFormat(search_data.end, 'yyyy-mm-dd') : '结束日期' }}</text>
										<u-icon name="calendar" size="28" color="#879BBA"></u-icon>
									</view>
								</picker>
							</view>
						</u-form-item>
						
						<u-form-item label="所属店铺">
							<view class="form-select" @click="goPage('/pagesT/shop/selShop')">
								<text class="select-text">{{ search_data.shopId ? search_data.shopName : '请选择店铺' }}</text>
								<u-icon :name="!search_data.shopId ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999" @click.stop="clearValue('shopId')"></u-icon>
							</view>
						</u-form-item>
						
						<u-form-item label-position="top" label="审核状态">
							<view class="status-options">
								<view 
									v-for="(item, index) in order_status" 
									:key="index" 
									class="status-option" 
									:class="[search_data.auditStatus === item.value ? 'active' : '']" 
									@click="statusChange(item)"
								>
									{{ item.label }}
								</view>
							</view>
						</u-form-item>
						
						<u-form-item label-position="top" label="出库状态">
							<view class="status-options">
								<view 
									v-for="(item, index) in single_status" 
									:key="index" 
									class="status-option" 
									:class="[search_data.inStatus === item.value ? 'active' : '']" 
									@click="stockChange(item)"
								>
									{{ item.label }}
								</view>
							</view>
						</u-form-item>
						
						<u-form-item label="业务员">
							<view class="form-select" @click="goPage('/pagesT/staff/selStaff')">
								<text class="select-text">{{ search_data.operatorId ? search_data.operatorName : '请选择业务员' }}</text>
								<u-icon :name="!search_data.operatorId ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999" @click.stop="clearValue('operatorId')"></u-icon>
							</view>
						</u-form-item>
					</u-form>
				</view>
				
				<view class="search-btn">
					<view class="reset-btn" @click="clearValue()">重置</view>
					<view class="confirm-btn" @click="searchConfirm">确定</view>
				</view>
			</view>
		</u-popup>
		
		<addBtn url="/pagesT/order/AddReturn"></addBtn>
	</view>
</template>

<script>
import uniStatusBar from '../../components/uni-status-bar.vue';
export default {
	components: {
		uniStatusBar
	},
	props: {
		shopData: {
			type: [Object, String],
			default: ''
		},
		staffData: {
			type: [Object, String],
			default: ''
		}
	},
	data() {
		return {
			refresher_triggered: false,
			order_status: [{ value: 2, label: '已审核' }, { value: 1, label: '待审核' }],
			single_status: [{ value: 4, label: '待出库' }, { value: 5, label: '已出库' }],
			search_show: false,
			pay_type_list: [],
			pay_index: 0,
			load_status: 'nomore',
			page: 1,
			pageSize: 10,
			total: 0,
			tab_current: 0,
			order_state: 'all',
			order_list: [],
			search_data: {
				inStatus: '',
				shopId: '',
				shopName: '',
				operatorId: '',
				operatorName: '',
				auditStatus: '',
				start: '',
				end: '',
				search: ''
			}
		};
	},
	created() {
		this.getAllOrderReturn();
	},
	watch: {
		shopData(val) {
			if (val) {
				this.search_data.shopName = val.name;
				this.search_data.shopId = val.id;
			}
		},
		staffData(val) {
			if (val) {
				this.search_data.operatorName = val.staffName;
				this.search_data.operatorId = val.id;
			}
		}
	},
	methods: {
		openSearch() {
			this.search_show = true;
		},
		scrollTolower() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getData();
			}
		},
		copy(no) {
			uni.setClipboardData({
				data: no,
				success: res => {
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		statusChange(row) {
			this.search_data.auditStatus = row.value;
		},
		stockChange(row) {
			this.search_data.inStatus = row.value;
		},
		searchConfirm() {
			this.search_show = false;
			this.page = 1;
			this.getData();
		},
		clearValue(params) {
			if (!params) {
				this.search_data = {
					inStatus: '',
					shopId: '',
					shopName: '',
					operatorId: '',
					operatorName: '',
					auditStatus: '',
					start: '',
					end: '',
					search: ''
				};
				this.searchConfirm();
			} else {
				this.search_data[params] = '';
			}
		},
		getData() {
			const obj = {
				inStatus: this.search_data.inStatus,
				shopId: this.search_data.shopId,
				operatorId: this.search_data.operatorId,
				auditStatus: this.search_data.auditStatus,
				start: this.search_data.start,
				end: this.search_data.end,
				search: this.search_data.search
			};
			const isKey = this.$utils.isSerch(obj);
			if (isKey) {
				this.searchAllOrderOut(obj);
			} else {
				this.getAllOrderReturn();
			}
		},
		searchAllOrderOut(obj) {
			this.load_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				...obj
			};
			this.$u.api
				.searchAllOrderOut(params)
				.then(res => {
					this.refresher_triggered = false;
					if (this.page === 1) {
						this.order_list = res.data;
					} else {
						this.order_list = this.order_list.concat(res.data);
					}
					this.order_list = this.order_list.map(item => {
						return {
							...item,
							goods_list: item.goods_list || []
						};
					});
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				})
				.catch(err => {
					this.refresher_triggered = false;
				});
		},
		getAllOrderReturn() {
			this.load_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize
			};
			this.$u.api
				.getAllOrderReturn(params)
				.then(res => {
					this.refresher_triggered = false;
					if (this.page === 1) {
						this.order_list = res.data;
					} else {
						this.order_list = this.order_list.concat(res.data);
					}
					this.order_list = this.order_list.map(item => {
						return {
							...item,
							goods_list: item.goods_list || []
						};
					});
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				})
				.catch(err => {
					this.refresher_triggered = false;
				});
		},
		bindDateStartChange(e) {
			this.search_data.start = this.$utils.timeByTimestamp(e.detail.value + ' 00:00:00');
		},
		bindDateEndChange(e) {
			this.search_data.end = this.$utils.timeByTimestamp(e.detail.value + ' 23:59:59');
		},
		refresherrefresh() {
			this.refresher_triggered = true;
			this.page = 1;
			this.getData();
		}
	}
};
</script>

<style lang="scss" scoped>
.order-out-box {
	background-color: #f5f7fa;
	min-height: 100vh;
}

/* 顶部搜索框样式 */
.header-search-box {
	background-color: #ffffff;
	padding: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.search-input-wrapper {
		flex: 1;
		height: 72rpx;
		background-color: #f5f7fa;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		margin-right: 20rpx;
		
		input {
			flex: 1;
			height: 72rpx;
			font-size: 28rpx;
			margin: 0 16rpx;
		}
	}
	
	.filter-btn {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: rgba(251, 89, 4, 0.1);
	}
}

/* 总数显示 */
.total-count {
	padding: 20rpx 30rpx;
	font-size: 24rpx;
	color: #879bba;
}

/* 订单列表容器 */
.order_ul {
	height: calc(90vh - 180rpx);
	padding: 0 20rpx;
}

/* 订单卡片样式 */
.order-card {
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	
	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-bottom: 2rpx solid #f5f7fa;
		
		.order-status {
			display: flex;
			align-items: center;
			
			.status-badge {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #ffffff;
				margin-right: 16rpx;
			}
			
			.status-stocked {
				background-color: #00c395;
			}
			
			.status-not-stocked {
				background-color: #fb5904;
			}
			
			.order-number {
				font-size: 28rpx;
				font-weight: 500;
				color: #2d405e;
				margin-left: 16rpx;
				font-family: DIN-Medium;
			}
		}
	}
	
	.order-content {
		padding: 24rpx;
		
		.info-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.info-label {
				font-size: 26rpx;
				color: #879bba;
				width: 160rpx;
			}
			
			.info-value {
				flex: 1;
				font-size: 26rpx;
				color: #2d405e;
				text-align: right;
				font-weight: 500;
			}
		}
		
		.order-amount {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-radius: 8rpx;
			margin: 20rpx 0;
			
			.amount-label {
				font-size: 28rpx;
				font-weight: 500;
				color: #2d405e;
			}
			
			.amount-value {
				font-size: 32rpx;
				font-weight: bold;
				font-family: DIN-Medium;
			}
		}
		
		.paid {
			background-color: rgba(0, 195, 149, 0.1);
			.amount-value {
				color: #00c395;
			}
		}
		
		.unpaid {
			background-color: rgba(246, 119, 120, 0.1);
			.amount-value {
				color: #f67778;
			}
		}
		
		.partial-paid {
			background-color: rgba(251, 89, 4, 0.1);
			.amount-value {
				color: #FB5904;
			}
		}
		
		.order-actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
		}
	}
}

/* 筛选弹窗样式 */
.search-pop {
	width: 600rpx;
	height: 100vh;
	background-color: #ffffff;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 80rpx 30rpx 30rpx;
		border-bottom: 2rpx solid #f5f7fa;
		
		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #2d405e;
		}
	}
	
	.form-view {
		padding: 30rpx;
		
		.date-range {
			display: flex;
			align-items: center;
			
			.date-picker {
				flex: 1;
				height: 72rpx;
				background-color: #f5f7fa;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				font-size: 24rpx;
				color: #2d405e;
			}
			
			.date-separator {
				margin: 0 20rpx;
				color: #879bba;
			}
		}
		
		.form-select {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 72rpx;
			background-color: #f5f7fa;
			border-radius: 8rpx;
			padding: 0 20rpx;
			
			.select-text {
				font-size: 26rpx;
				color: #2d405e;
			}
		}
		
		.status-options {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -10rpx;
			
			.status-option {
				margin: 10rpx;
				padding: 12rpx 24rpx;
				background-color: #f5f7fa;
				border-radius: 6rpx;
				font-size: 26rpx;
				color: #62738E;
				transition: all 0.3s;
				
				&.active {
					background-color: #FB5904;
					color: #ffffff;
				}
			}
		}
	}
	
	.search-btn {
		position: absolute;
		bottom: 40rpx;
		right: 30rpx;
		display: flex;
		
		.reset-btn, .confirm-btn {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 40rpx;
			font-size: 28rpx;
		}
		
		.reset-btn {
			background-color: #f5f7fa;
			color: #879bba;
			margin-right: 20rpx;
		}
		
		.confirm-btn {
			background-color: #FB5904;
			color: #ffffff;
		}
	}
}

.empty-view {
	padding-top: 200rpx;
	display: flex;
	justify-content: center;
}
</style>
